<template>
  <div>
    <!-- <div class="filter-form" >
      <el-row>
        <el-col :span="22">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="区域">
              <city-area ref="cityArea" :cityAreaValue.sync="form.area" />
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="form.type" placeholder="类型" class="width-120" >
                <el-option v-for="item in parking_type" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="禁启用">
              <el-select v-model="form.status" placeholder="请选择" class="width-120" >
                <el-option v-for="item in parking_status" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关键字">
              <el-select v-model="search_key" placeholder="请选择" class="width-120">
                <el-option label="停车场名称" value="parkingName"></el-option>
                <el-option label="详细区域" value="address"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="keyword"  placeholder="请输入关键字按Enter搜索"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <div>
            <router-link to="/parkingAdd">
              <el-button type="primary" class="pull-right" >新增停车场</el-button>
            </router-link>
          </div>
        </el-col>
      </el-row>
    </div> -->
    <table-data ref="table" :config="table_config" :searchFormConfig="search_form_config">
      <template v-slot:status="slotData">
        <el-switch :disabled="slotData.data.id == switch_disabled" @change="switchChange(slotData.data)" v-model="slotData.data.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </template>
      <template v-slot:lnglat="slotData">
        <el-button size="mini" type="success" @click="showLocation(slotData.data)">查看地图</el-button>
      </template>
      <template v-slot:operation="slotData">
        <el-button type="primary" size="small" @click="edit(slotData.data.id)">编辑</el-button>
        <el-button type="danger" size="small" :loading="slotData.data.id == rowId" @click="onDelete(slotData.data.id)">删除</el-button>
      </template>
    </table-data>
    <MapLocation :flagVisible.sync="flagVisible" :parking_data="parking_data" />
  </div>
</template>

<script>
import { ParkingList, ParkingDelete, ParkingStatus } from "@/api/parking.js"
import CityArea from "@/components/common/cityArea"
import MapLocation from "@/components/dialog/showMapLocation"
import TableData from "@c/tableData"
import {address,parkingType} from "@/utils/common.js"

export default {
  name: "Parking",
  components: {
    CityArea,
    MapLocation,
    TableData
  },
  data() {
    return {
      table_config: {
        thead:[
          {label:"ID",prop:"id"},
          {label:"停车场名称",prop:"parkingName"},
          {
            label:"类型",
            prop:"type",
            type: "function",
            callback:(row, prop) => {
              return parkingType(row[prop]);
            }
          },
          {
            label:"区域",
            prop:"address",
            type: "function",
            callback: (row, prop) => {
              return address(row[prop])
            }
          },
          {label:"可停放车辆",prop:"carsNumber"},
          {
            label:"禁启用",
            prop:"status",
            type: "slot",
            slotName: "status"
          },
          { 
            label:"查看位置",
            prop:"lnglat",
            type: "slot",
            slotName: "lnglat"
          },
          {
            label:"操作",
            type: "slot",
            slotName: "operation"
          },
        ],
        url: "parkingList",
        data: {
          pageSize: 10,
          pageNumber: 1
        }
      },
      table_loading: false,
      parking_data: {},
      flagVisible: false,
      parking_status: this.$store.state.config.parking_status,
      parking_type: this.$store.state.config.parking_type,
      parking_type_json: this.$store.state.config.parking_type_json,
      value: "",
      form: {
        area: "",
        type: "",
        status: "",
      },
      search_key: "",
      keyword: "",
      switch_disabled: "",
      rowId: "",
      search_form_config: {
        form_item: [
          {label:"区域",type:"City"},
          {label:"类型",prop:"parkingType",type:"Select",width: "120px",options:"parking_type"},
          {label:"禁启用",prop:"status",type:"Select",width: "120px",options:"radio_disabled"},
          {label:"关键字",type:"Keyword",options: ["parkingName","address"]},
        ],
        form_handler: [
          {label: "新增停车场", prop:"add", type:"success",element:"link",router:"/parkingAdd"},
        ]
      },
    }
    
  },
  methods: {
    switchChange(data) {
      const requestData = {
        id: data.id,
        status: data.status
      }
      this.switch_disabled = data.id;
      ParkingStatus(requestData)
        .then((res) => {
          this.$message({
            type: 'success',
            message: res.message
          });
          this.switch_disabled = "";
        })
        .catch(()=>{this.switch_disabled = "";})
    },
    onDelete(id) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.rowId = id;
        ParkingDelete({id})
          .then((res) => {
            this.$message({
              type: 'success',
              message: res.message
            });
            this.rowId = ""
            this.$refs.table.requestData();
          }) 
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });  
        this.rowId = "";       
      });
    },
    getType(value) {
      const data = this.parking_type.filter(item => item.value == value)
      if(data && data.length > 0) {
        return data[0].label
      }
    },
    showLocation(row) {
      this.flagVisible = true
      this.parking_data = row
    },
    search() {
      const data = {
        pageSize: 10,
        pageNumber: 1
      }
      const filterData = JSON.parse(JSON.stringify(this.form))
      for(let key in filterData) {
        if(filterData[key]) {
          data[key] = filterData[key]
        }
      }
      if(this.keyword && this.search_key) {
        data[this.search_key] = this.keyword;
      }
      this.$refs.table.requestData(data);
    },
    edit(id) {
      this.$router.push({
        name: "ParkingAdd",
        query: {id}
      })
    },
  }
}
</script>

<style lang="scss" scoped>

</style>